<template>
  <section class="mg-p">
    <h1>Css</h1>

    <img src="../../assets/imgs/1.jpeg">

    <div class="one"></div>

    <div class="bg"></div>
  </section>
</template>

<script>
export default {
  name: "index"
}
</script>

<style lang="scss" scoped>
$count: 400;
$sqrt: 20;
$per: 100% / $sqrt;
$width: 300px;
$perWid: 15;

@for $i from 1 to ($count + 1) {
  @property --m-#{$i} {
    syntax: "<number>";
    initial-value: 1;
    inherits: false;
  }
}

@function bgSet($n) {
  $bg: radial-gradient(rgba(0, 0, 0, var(--m-1)), rgba(0, 0, 0, var(--m-1)));
  @for $i from 2 through $n {
    $bg: $bg, radial-gradient(rgba(0, 0, 0, var(--m-#{$i})), rgba(0, 0, 0, var(--m-#{$i})));
  }
  @return $bg;
}

@function positionSet($n) {
  $bgPosition: ();
  @for $i from 0 through ($n) {
    @for $j from 0 through ($n - 1) {
      $bgPosition: $bgPosition, #{$i * $perWid}px #{$j * $perWid}px;
    }
  }
  @return $bgPosition;
}

@function transitionSet($n) {
  $transition: --m-1 0.1s 0.1s;

  @for $i from 1 through $n {
    //$transition: $transition, --m-#{$i} #{random(500)}ms #{random(500)}ms;
    $transition: $transition, --m-#{$i} #{100 + random(500)}ms #{($i / 50) * random(100)}ms;
  }
  @return $transition;
}

img {
  width: $width;
  height: $width;
  //background: url(image.jpg);
  mask: bgSet($count);
  mask-size: $per $per;
  mask-repeat: no-repeat;
  mask-position: positionSet($sqrt);
  transition: transitionSet($count);
}

img:hover {
  @for $i from 1 through $count {
    --m-#{$i}: 0;
  }
}

h1 {
  color: rgba(0, 0, 0, .2);
}


@property --per {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 25%;
}

.one {
  border-radius: 50%;
  width: 260px;
  height: 260px;
  background: conic-gradient(yellowgreen, #d8f59d var(--per), transparent var(--per), transparent 100%);
  transition: --per 300ms linear;

  &:hover {
    --per: 60%;
  }
}


@property --perA {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 75%;
}

@property --perB {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 99%;
}

@property --perC {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 15%;
}

@property --perD {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 16%;
}

@property --perE {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 86%;
}

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}


.bg {
  width: 800px;
  height: 400px;
  background-image: radial-gradient(
          circle at var(--perE) 7%,
          rgba(40, 40, 40, 0.04) 0%,
          rgba(40, 40, 40, 0.04) 50%,
          rgba(200, 200, 200, 0.04) 50%,
          rgba(200, 200, 200, 0.04) 100%
  ),
  radial-gradient(
          circle at var(--perC) var(--perD),
          rgba(99, 99, 99, 0.04) 0%,
          rgba(99, 99, 99, 0.04) 50%,
          rgba(45, 45, 45, 0.04) 50%,
          rgba(45, 45, 45, 0.04) 100%
  ),
  radial-gradient(
          circle at var(--perA) var(--perB),
          rgba(243, 243, 243, 0.04) 0%,
          rgba(243, 243, 243, 0.04) 50%,
          rgba(37, 37, 37, 0.04) 50%,
          rgba(37, 37, 37, 0.04) 100%
  ),
  linear-gradient(var(--angle), rgb(34, 222, 237), rgb(135, 89, 215));
  animation: move 30s infinite alternate linear;
}

@keyframes move {
  100% {
    --perA: 85%;
    --perB: 49%;
    --perC: 45%;
    --perD: 39%;
    --perE: 70%;
    --angle: 360deg;
  }
}

</style>
